<template>
    <div class="menuContainer">
        <div class="menuTitle">点餐小程序后台管理</div>
        <div v-for="(item, index) in menuItem" :key="index" class="menuItem" @click="navigateTo(item.value)">
            <span>{{ item.name }}</span>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import router from "../router/index.js";

const menuItem = ref([
    { name: '数据首页', value: '/home' },
    { name: '订单管理', value: '/order' },
    { name: '菜品管理', value: '/food' },
    { name: '评价管理', value: '/comment' }
]);


const navigateTo = (path) => {
    router.push(path);
}
</script>

<style>
body,
#app {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  margin: 0%;
  padding: 0%;
}

.menuContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 10%;
    height: 100%;
    background-color: #4d4d4d;
}

.menuTitle {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "楷体";
    font-size: 120%;
    color: #ffffff;
    width: 100%;
    height: 10%;
}

.menuItem {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "宋体";
    font-weight: 600;
    color: #ffffff;
    width: 100%;
    height: 6%;
    padding: 0%;

}

.menuItem:hover {
    background-color: #6b6b6b;
}
</style>